>
<template>
  <view class="page">
    <u-navbar
      title="支付结果"
      bgColor="transparent"
      :autoBack="true"
      :titleStyle="{ color: '#fff' }"
      leftIconSize="48rpx"
      leftIconColor="#fff"></u-navbar>

    <view class="page-ctx">
      <view class="success-wrap">
        <view class="icon-box">
          <image src="@/static/payment/result-done.png"></image>
        </view>
        <view class="text-box">
          <view class="text1">支付成功!</view>
          <view class="text2">感谢您的购买</view>
        </view>
      </view>
      <view class="info-wrap">
        <view class="info-box">
          <view class="info-line"></view>
          <view class="info-inner">
            <view class="info-bg"></view>

            <view class="price">
              <text class="value">{{ pay_info.price || "" }}</text>
              <text class="huobi" style="font-size: 28rpx">积分</text>
            </view>
            <view class="info-items">
              <view class="info-item">
                <view class="label">订单编号：</view>
                <view class="text">
                  {{ pay_info.no || "" }}
                </view>
              </view>
              <view class="info-item">
                <view class="label">下单时间：</view>
                <view class="text">
                  {{ pay_info.time || "" }}
                </view>
              </view>
              <view class="info-item">
                <view class="label">支付方式：</view>
                <view class="text">微信支付</view>
              </view>

              <!-- <view class="info-item" v-if="pay_info.jifen">
								<view class="label">
									积分赠予：
								</view>
								<view class="text">
									{{pay_info.jifen|| '0'}} 积分
								</view>
							</view> -->
            </view>
          </view>
        </view>
        <view class="btns flex-between">
          <view class="btn-detail fit-text" @click="toBackBalance()">
            返回余额
          </view>
          <!-- <view class="btn-detail fit-text" @click="toOrder()">订单详情</view> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type: "order", //默认 order 普通订单   hotel - 酒店订房订单
      info: {},
      pay_info: {
        price: "",
        no: "",
        time: "",
        jifen: "",
      },
      order_id: "",
      isPayed: true,
    };
  },
  onLoad(option) {
    this.order_id = option.id || option.order_id;
    this.isPayed = option.is_pay == 1;
    this.type = option.type || "order";

    this.setView();
  },
  methods: {
    setView() {
      this.showLoading();
      this.query_jifen_order();
    },
    // 普通商品订单
    query_jifen_order() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "orders_detail",
          id: this.order_id,
          if_jifen: 1,
        },
      }).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          this.isPayed = res.data.status >= 2;
          let productItem = res.data.products[0];
          let jifen = productItem.jifen;

          this.pay_info = {
            price: jifen,
            no: data.order_id,
            time: data.createdTime,
            jifen: data.zeng_jifen || 0,
            pay_type:
              data.pay_info && data.pay_info.yue ? "余额支付" : "微信支付",
          };
        }
      });

      // this.hideLoading()
    },

    toOrder() {
      this.toRoute({
        path: "/points-order-detail",
        query: {
          id: this.order_id,
          from: "payment",
        },
        mode: "reLaunch",
      });
    },

    toBackBalance() {},
  },
};
</script>

<style lang="scss">
page {
  background: #f8f8f8;
}
</style>

<style lang="scss" scoped>
.page {
}

.page-ctx {
}

.success-wrap {
  width: 100%;
  height: 484rpx;

  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 160rpx;
  background: #f49c0d;

  .icon-box {
    width: 150rpx;
    height: 150rpx;

    image {
      width: 150rpx;
      height: 150rpx;
    }
  }

  .text-box {
    padding-bottom: 22rpx;

    .text1 {
      font-family: PingFang SC, PingFang SC;
      font-weight: 800;
      font-size: 36rpx;
      color: #ffffff;
    }

    .text2 {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #ffffff;
    }
  }
}

.info-wrap {
  width: 710rpx;
  padding: 0 0;
  margin: 0 auto;
  position: relative;
  top: -120rpx;

  .info-box {
    width: 100%;

    .info-line {
      width: 710rpx;
      height: 24rpx;
      background: #b16f04;
      border-radius: 17rpx 17rpx 17rpx 17rpx;
    }

    .info-inner {
      position: relative;
      top: -12rpx;
      margin: 0 auto;
      width: 678rpx;
      // min-height: 445rpx;
      padding: 0 20rpx;
      background: #ffffff;
      box-shadow: 0rpx 10rpx 20rpx 1rpx rgba(0, 55, 116, 0.1);
      border-radius: 0rpx 0rpx 20rpx 20rpx;

      .info-bg {
        top: 0;
        left: 0;
        right: 0;
        position: absolute;
        height: 56rpx;
        background: linear-gradient(
          180deg,
          rgba(50, 162, 56, 0.2) 0%,
          rgba(50, 162, 56, 0) 100%
        );
      }

      .price {
        font-weight: bold;
        font-size: 48rpx;
        color: #000000;
        text-align: center;
        padding: 32rpx 0;

        .huobi {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 48rpx;
          color: #000000;
        }

        .value {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 48rpx;
          color: #000000;
        }
      }

      .info-items {
        border-top: 1rpx dashed #eee;
        padding: 40rpx 0 60rpx 0;

        .info-item {
          display: flex;

          & + .info-item {
            margin-top: 40rpx;
          }

          .label {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #222222;
          }

          .text {
            flex: 1;
            overflow: hidden;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #7d7d7d;
          }
        }
      }
    }
  }
}

.btns {
  margin-top: 150rpx;

  .btn-detail {
    width: 334rpx;
    height: 80rpx;
    background: #f49c0d;
    border-radius: 64rpx 64rpx 64rpx 64rpx;

    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #ffffff;
  }
}
</style>
